<template>
    <div class="box">
        <div class="box-1">
            搜索列表🍓🍉🍌🍇🍎🍊
            <input type="text" placeholder="请输入关键字">
        </div>
        <div class="box-2">
            <div class="box-left">
                <dl>
                    <dt> <img
                            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                            alt=""></dt>
                    <dd>苏勇</dd>
                    <dd>
                        asjnasdsa
                    </dd>
                </dl>
            </div>
            <div class="box-center">
                <h3>阿克苏记得那时</h3>
                <p>1999-23-43</p>
            </div>
            <div class="box-right">
                <h1>$789</h1>
                <p> <el-button type="success">已支付</el-button></p>
            </div>
        </div>
        <div class="box-2">
            <div class="box-left">
                <dl>
                    <dt> <img
                            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                            alt=""></dt>
                    <dd>苏勇</dd>
                    <dd>
                        asjnasdsa
                    </dd>
                </dl>
            </div>
            <div class="box-center">
                <h3>阿克苏记得那时</h3>
                <p>1999-23-43</p>
            </div>
            <div class="box-right">
                <h1>$789</h1>
                <p> <el-button type="success">已支付</el-button></p>
            </div>
        </div>
        <div class="box-2">
            <div class="box-left">
                <dl>
                    <dt> <img
                            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                            alt=""></dt>
                    <dd>苏勇</dd>
                    <dd>
                        asjnasdsa
                    </dd>
                </dl>
            </div>
            <div class="box-center">
                <h3>阿克苏记得那时</h3>
                <p>1999-23-43</p>
            </div>
            <div class="box-right">
                <h1>$789</h1>
                <p> <el-button type="success">已支付</el-button></p>
            </div>
        </div>
        <div class="box-2">
            <div class="box-left">
                <dl>
                    <dt> <img
                            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                            alt=""></dt>
                    <dd>苏勇</dd>
                    <dd>
                        asjnasdsa
                    </dd>
                </dl>
            </div>
            <div class="box-center">
                <h3>阿克苏记得那时</h3>
                <p>1999-23-43</p>
            </div>
            <div class="box-right">
                <h1>$789</h1>
                <p> <el-button type="success">已支付</el-button></p>
            </div>
        </div>
        <div class="box-2">
            <div class="box-left">
                <dl>
                    <dt> <img
                            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                            alt=""></dt>
                    <dd>苏勇</dd>
                    <dd>
                        asjnasdsa
                    </dd>
                </dl>
            </div>
            <div class="box-center">
                <h3>阿克苏记得那时</h3>
                <p>1999-23-43</p>
            </div>
            <div class="box-right">
                <h1>$789</h1>
                <p> <el-button type="success">已支付</el-button></p>
            </div>
        </div>
        <div class="box-2">
            <div class="box-left">
                <dl>
                    <dt> <img
                            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.54qlbLNAZ64K94c_DCT-qAAAAA?w=141&h=166&c=7&r=0&o=5&dpr=1.1&pid=1.7"
                            alt=""></dt>
                    <dd>苏勇</dd>
                    <dd>
                        asjnasdsa
                    </dd>
                </dl>
            </div>
            <div class="box-center">
                <h3>阿克苏记得那时</h3>
                <p>1999-23-43</p>
            </div>
            <div class="box-right">
                <h1>$789</h1>
                <p> <el-button type="success">已支付</el-button></p>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.box {
    padding: 10px;
}

.box-1 {
    width: 98%;
    height: 50px;
    background-color: #fff;
    line-height: 50px;
    margin-left: 10px;
    margin-bottom: 20px;
    font-size: 20px;
    padding: 10px;

    input {
        height: 35px;
        width: 250px;
        border: 1px solid #ccc;
    }
}

.box-left dt {
    float: left;
}

.box-left {
    margin-top: 10px;
}

.box-left dl dd {
    margin-left: 60px;
    line-height: 22px;
}

.box-2 {
    width: 96%;
    height: 80px;
    background-color: #fff;
    display: flex;
    padding-left: 20px;
    margin-left: 20px;
    margin-top: 10px;
}

.box-center {
    margin-left: 500px;
    margin-top: 15px;
}

.box-right {
    margin-left: 500px;
    line-height: 50px;
    display: flex;

    p {
        margin-left: 20px;
    }
}

.box-left img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
</style>